<template>
  <div>
    <t-card
      class='list-card-container'
      :bordered='false'
    >
      <t-row justify='space-between'>
        <div class='left-operation-container'>
          <t-button
            variant='base'
            theme='default'
            :disabled='!selectedRowKeys.length'
          > 导出评分名单
          </t-button>
          <p
            v-if='!!selectedRowKeys.length'
            class='selected-count'
          >已选{{ selectedRowKeys.length }}项</p>
        </div>
        <t-input
          v-model='searchValue'
          class='search-input'
          placeholder='请输入你需要搜索的内容'
          clearable
        >
          <template #suffix-icon>
            <search-icon size='20px' />
          </template>
        </t-input>
      </t-row>

      <div>
        <t-table
          bordered
          :columns='columns'
          :data='data'
          :rowKey='rowKey'
          :hover='hover'
          :stripe='true'
          :showHeader='true'
          :pagination='pagination'
          :selected-row-keys='selectedRowKeys'
          :loading='dataLoading'
          @page-change='rehandlePageChange'
          @change='rehandleChange'
          @select-change='rehandleSelectChange'
        >
          <template #status='{ row }'>
            <t-tag
              v-if='row.status === CONTRACT_STATUS.FAIL'
              theme='danger'
              variant='light-outline'
            >评分未通过
            </t-tag>
            <t-tag
              v-if='row.status === CONTRACT_STATUS.AUDIT_PENDING'
              theme='warning'
              variant='light-outline'
            >待评分
            </t-tag>
            <t-tag
              v-if='row.status === CONTRACT_STATUS.EXEC_PENDING'
              theme='warning'
              variant='light-outline'
            >待通过
            </t-tag>
            <t-tag
              v-if='row.status === CONTRACT_STATUS.EXECUTING'
              theme='success'
              variant='light-outline'
            >评分通过
            </t-tag>
            <t-tag
              v-if='row.status === CONTRACT_STATUS.FINISH'
              theme='success'
              variant='light-outline'
            >已完成
            </t-tag>
          </template>

          <template #op='slotProps'>
            <a
              class='t-button-link' @click='handleClickDetail()'
            >详情</a>
            <a
              class='t-button-link'
              @click='handleClickDelete(slotProps)'
            >删除</a>
          </template>
        </t-table>
      </div>
    </t-card>
    <t-dialog
      header='确认删除当前的救助活动？'
      :body='confirmBody'
      :visible.sync='confirmVisible'
      @confirm='onConfirmDelete'
      :onCancel='onCancel'
    >
    </t-dialog>
  </div>
</template>
<script lang='ts'>
import {SearchIcon} from 'tdesign-icons-vue';
import Trend from '@/components/trend/index.vue';
import {prefix} from '@/config/global';

import {CONTRACT_STATUS, CONTRACT_STATUS_OPTIONS, CONTRACT_TYPES, CONTRACT_PAYMENT_TYPES} from '@/constants';

export default {
  name: 'ListBase',
  components: {
    SearchIcon,
    Trend,
  },
  data () {
    return {
      CONTRACT_STATUS,
      CONTRACT_STATUS_OPTIONS,
      CONTRACT_TYPES,
      CONTRACT_PAYMENT_TYPES,
      prefix,
      dataLoading: false,
      data:
        [
          {
            "index": 1,
            "status": 3,
            "no": "BH0084",
            "name": "第十三次田化村救助活动",
            "score":100
          },
          {
            "index": 2,
            "status": 0,
            "no": "BH0020",
            "name": "筹集折翼小狗资金",
            "score":100
          },
          {
            "index": 3,
            "status": 3,
            "no": "BH0078",
            "name": "救助中华狸花猫",
            "score":100
          },
          {
            "index": 4,
            "status": 4,
            "no": "BH0012",
            "name": "为折翼小狗进行募捐",
            "score":100
          },
          {
            "index": 5,
            "status": 2,
            "no": "BH0055",
            "name": "BP0013",
            "score":100
          },
          {
            "index": 6,
            "status": 3,
            "no": "BH0099",
            "name": "BP0017",
            "score":100
          },
          {
            "index": 7,
            "status": 2,
            "no": "BH0078",
            "name": "BP0029",
            "score":100
          },
          {
            "index": 8,
            "status": 4,
            "no": "BH0054",
            "name": "BP0046",
            "score":100
          },
          {
            "index": 9,
            "status": 1,
            "no": "BH0046",
            "name": "BP0031",
            "score":100
          }
        ],
      selectedRowKeys: [],
      value: 'first',
      columns: [
        {colKey: 'row-select', type: 'multiple', width: 64, fixed: 'left'},
        {title: '活动名称', align: 'left', width: 250, ellipsis: true, colKey: 'name', fixed: 'left',},
        {title: '评分状态', colKey: 'status', width: 200, cell: {col: 'status'}},
        {title: '分数', colKey: 'score', width: 200, cell: {col: 'score'}},
        {title: '救助活动编号', width: 200, ellipsis: true, colKey: 'no',},
        {align: 'left', fixed: 'right', width: 200, colKey: 'op', title: '操作',},
      ],
      rowKey: 'index',
      tableLayout: 'auto',
      hover: true,
      rowClassName: (rowKey: string) => `${rowKey}-class`,
      // 与pagination对齐
      pagination: {
        defaultPageSize: 10,
        total: 9,
        defaultCurrent: 1,
      },
      searchValue: '',
      confirmVisible: false,
      deleteIdx: -1,
    };
  },
  computed: {
    confirmBody () {
      if (this.deleteIdx > -1) {
        const {name} = this.data?.[this.deleteIdx];
        return `删除后，${name}的所有合同信息将被清空，且无法恢复`;
      }
      return '';
    },
    offsetTop () {
      return this.$store.state.setting.isUseTabsRouter ? 48 : 0;
    },
  },
  mounted () {
    this.dataLoading = true;
    this.dataLoading = false;
    // 发送请求
    /*this.$request
      .get('/api/get-list')
      .then((res) => {
        if (res.code === 0) {
          const {list = []} = res.data;
          this.data = list;
          this.pagination = {
            ...this.pagination,
            total: list.length,
          };
        }
      })
      .catch((e: Error) => {
        console.log(e);
      })
      .finally(() => {
        this.dataLoading = false;
      });*/
  },

  methods: {
    getContainer () {
      return document.querySelector('.tdesign-starter-layout');
    },
    rehandlePageChange (curr, pageInfo) {
      console.log('分页变化', curr, pageInfo);
    },
    rehandleSelectChange (selectedRowKeys: number[]) {
      this.selectedRowKeys = selectedRowKeys;
    },
    rehandleChange (changeParams, triggerAndData) {
      console.log('统一Change', changeParams, triggerAndData);
    },
    handleClickDetail () {
      this.$router.push('/score/detail');
    },
    handleSetupContract () {
      this.$router.push('/pet/add');
    },
    handleClickDelete (row: { rowIndex: any }) {
      this.deleteIdx = row.rowIndex;
      this.confirmVisible = true;
    },
    onConfirmDelete () {
      // 真实业务请发起请求
      this.data.splice(this.deleteIdx, 1);
      this.pagination.total = this.data.length;
      const selectedIdx = this.selectedRowKeys.indexOf(this.deleteIdx);
      if (selectedIdx > -1) {
        this.selectedRowKeys.splice(selectedIdx, 1);
      }
      this.confirmVisible = false;
      this.$message.success('删除成功');
      this.resetIdx();
    },
    onCancel () {
      this.resetIdx();
    },
    resetIdx () {
      this.deleteIdx = -1;
    },
  },
};
</script>

<style
  lang='less'
  scoped
>
@import '@/style/variables';

.payment-col {
  display: flex;

  .trend-container {
    display: flex;
    align-items: center;
    margin-left: 8px;
  }
}

.left-operation-container {
  padding: 0 0 6px 0;
  margin-bottom: 16px;

  .selected-count {
    display: inline-block;
    margin-left: var(--td-comp-margin-s);
    color: var(--td-text-color-secondary);
  }
}

.search-input {
  width: 360px;
}

.t-button + .t-button {
  margin-left: var(--td-comp-margin-s);
}
</style>
